<template>
  <div style="width: 100%;height: 100%;" @contextmenu.prevent="refreshWeb">
    <div class="toolbar">
      <div v-for="item of tool.life" :key="item.id" :class="item.style" @click="toWeb(item.url)">
        <svg class="icon" aria-hidden="true" style="width: 35px;height: 35px">
          <use :xlink:href="(item.icon == null || item.icon === '') && item.url !== '' ? '#icon-noziyuan' : item.icon"></use>
        </svg>
        <span class="name">{{item.name}}</span>
      </div>
    </div>

    <div class="toolbar">
      <div v-for="item of tool.tool" :key="item.id" :class="item.style" @click="toWeb(item.url)">
        <svg class="icon" aria-hidden="true" style="width: 35px;height: 35px">
          <use :xlink:href="(item.icon == null || item.icon === '') && item.url !== '' ? '#icon-noziyuan' : item.icon"></use>
        </svg>
        <span class="name">{{item.name}}</span>
      </div>
    </div>

    <div class="toolbar">
      <div v-for="item of tool.work" :key="item.id" :class="item.style" @click="toWeb(item.url)">
        <svg class="icon" aria-hidden="true" style="width: 35px;height: 35px">
          <use :xlink:href="(item.icon == null || item.icon === '') && item.url !== '' ? '#icon-noziyuan' : item.icon"></use>
        </svg>
        <span class="name">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>

  import { shell } from 'electron'
  import { getWeb, clearCache } from '../api/web.js'
  import {isNull} from "../assets/js/utils/validate"
  export default {
    name: "webCollect",
    data () {
      return {
        tool :{
          life: [],
          tool: [],
          work: []
        }
      }
    },
    methods: {
      toWeb(url) {
        if (url) {
          shell.openExternal(url)
        }
      },
      findWeb () {
        getWeb().then(resp => {
          this.tool.life = this.formatToolItem(resp.data.life)
          this.tool.tool = this.formatToolItem(resp.data.tool)
          this.tool.work = this.formatToolItem(resp.data.work)
        })
      },
      refreshWeb () {
        clearCache().then(() => {
          this.findWeb()
        })
      },
      formatToolItem (item) {

        if (isNull(item)) return

        let postfix = item[0].type

        let offset
        if (item.length < 5)
          offset = 5 - item.length
        else if (item.length > 5 && (item.length % 5) > 0)
          offset = 5 - (item.length % 5)

        for (let i = 0 ; i < offset ; i ++) {
          let param = { id: Math.random(), name: '', url: '', icon:'',type: item[0].type}
          item.push(param)
        }

        for (let i = 0 ; i < item.length ; i ++) {
          if (item[i].url !== '') {
            item[i].style = 'tool-item tool-item-' + postfix
          } else {
            item[i].style = 'tool-item-offset tool-item-' + postfix
          }

          if (i === 0) {
            item[i].style = item[i].style + ' tool-item-top-left'
          }

          if (i === 4) {
            item[i].style = item[i].style + ' tool-item-top-right'
          }

          if (i === item.length - 5) {
            item[i].style = item[i].style + ' tool-item-bottom-left'
          }

          if (i === item.length - 1) {
            item[i].style = item[i].style + ' tool-item-bottom-right'
          }
        }

        return item
      }
    },
    mounted() {
      this.findWeb()
    }
  }
</script>

<style scoped lang="scss">

  .toolbar {
    width: 95%;
    padding: 10px 10px 10px 10px;
    @include flex(row,flex-start);
    flex-wrap: wrap;

    .tool-item {
      @include flex(column,space-around,center);
      width: 20%;
      height: 130px;
      transition: box-shadow 0.5s;
      z-index: 1;
      cursor: pointer;
      &:hover {
        z-index: 2;
        transition: box-shadow 0.3s;
        box-shadow: 0 0 14px 1px rgba(0,0,0,.3);
      }

      .name {
        font-size: 12px;
      }
    }

    .tool-item-offset {
      width: 20%;
      z-index: 1;
    }

    .tool-item-life {
      color: $theme-color-light-dark;
      background-color: #f5f5f5;
      [data-theme="night"] & {
        color: $theme-color-night-dark;
        background-color: rgba(90, 90, 90, 0.1);
      }
    }
    .tool-item-tool {
      color: $theme-color-light-dark;
      background-color: #f5f5f5;
      [data-theme="night"] & {
        color: $theme-color-night-dark;
        background-color: rgba(90, 90, 90, 0.1);
      }
    }
    .tool-item-work {
      color: $theme-color-light-dark;
      background-color: #f5f5f5;
      [data-theme="night"] & {
        color: $theme-color-night-dark;
        background-color: rgba(90, 90, 90, 0.1);
      }
    }
    .tool-item-top-left     {border-top-left-radius: 10px;}
    .tool-item-top-right    {border-top-right-radius: 10px;}
    .tool-item-bottom-left  {border-bottom-left-radius: 10px;}
    .tool-item-bottom-right {border-bottom-right-radius: 10px;}
  }
</style>
